<template>
  <div id="vibdetail" v-loading="loading">
    <v-tableTitle
      :btnConfig="btnConfig"
      :tableSelectData="tableSelectData"
      :title="$t('ex.vib')"
      @download="download"
    ></v-tableTitle>
    <v-table
      :hasEdit="false"
      :page="page"
      :pageSize="pageSize"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :total="total"
      @findData="getTableData"
      @getTableData="getTableData"
      @searhData="searhData"
      @selectData="selectData"
      @upData="getTableData"
      ref="table"
    ></v-table>
  </div>
</template>

<script type="text/ecmascript-6">
import tableTitle from "commons/TableTitle";
import table from "commons/Table";
import baseMixin from "@/mixins/BaseMixin";

export default {
    name: "vibdetail",
    mixins: [baseMixin],
    data() {
        return {
            loading: false,
            tableConfig: [
                {
                    label: this.$t('config.shipper'),
                    prop: "storerkey",
                    input: "input",
                },
                {
                    label: this.$t('config.sku'),
                    prop: "sku",
                    input: "input",
                },
                {
                    label: this.$t('common.desc'),
                    prop: "descr",
                    input: "input"
                },
                {
                    label: this.$t('bill.lot'),
                    prop: "lot",
                    input: "input",
                },
                {
                    label: this.$t('config.loc'),
                    prop: "loc",
                    input: "input",
                },
                {
                    label: this.$t('in.lpn'),
                    prop: "id",
                    input: "input"
                },
                {
                    label: this.$t('ex.qty1'),
                    prop: "qty",
                  searh: "qtystr",
                    input: "input"
                },
                {
                    label: this.$t('ex.qtyavailable'),
                    prop: "qtyavailable",
                  searh: "qtyavailablestr",
                    input: "input"
                },
                {
                    label: this.$t('common.status'),
                    prop: "status",
                    input: "input"
                },
                {
                    label: this.$t('outbound.qtyallocated'),
                    prop: "qtyallocated",
                  searh: "qtyallocatedstr",
                    input: "input"
                },
                {
                    label: this.$t('ex.overallocated'),
                    prop: "overallocated",
                    input: "input"
                },
                {
                    label: this.$t('outbound.qtypicked'),
                    prop: "qtypicked",
                  searh: "qtypickedstr",
                    input: "input"
                },
                {
                    label: this.$t('out.qtypickinprocess'),
                    prop: "qtypickinprocess",
                    input: "input"
                },
                /*{
                    label: this.$t('out.pendingmovein'),
                    prop: "pendingmovein",
                    input: "input"
                },*/
                {
                    label: this.$t('in.totalqtyexpected'),
                    prop: "qtyexpected",
                    input: "input"
                },
                {
                    label: this.$t('ex.rtxrpqty'),
                    prop: "rtxrpqty",
                    input: "input"
                },
                {
                    label: this.$t('config.serialNo'),
                    prop: "serials",
                    input: "input"
                },
                {
                    label: this.$t('config.gross'),
                    prop: "grosswgt",
                    input: "input"
                },
                {
                    label: this.$t('config.suttle'),
                    prop: "netwgt",
                    input: "input"
                },
                {
                    label: this.$t('config.tareWeight'),
                    prop: "tarewgt",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'01'}),
                    prop: "lottable01",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'02'}),
                    prop: "lottable02",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'03'}),
                    prop: "lottable03",
                    input: "input"
                },
                {
                    label: this.$t('in.lottable04'),
                    prop: "lottable04",
                    input: "date"
                },
                {
                    label: this.$t('in.lottable05'),
                    prop: "lottable05",
                    input: "date"
                },
                {
                    label: this.$t('config.batchProp',{no:'06'}),
                    prop: "lottable06",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'07'}),
                    prop: "lottable07",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'08'}),
                    prop: "lottable08",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'09'}),
                    prop: "lottable09",
                    input: "input"
                },
                {
                    label: this.$t('config.batchProp',{no:'10'}),
                    prop: "lottable10",
                    input: "input"
                },
                {
                    label: this.$t('ex.lottable11'),
                    prop: "lottable11",
                    input: "date"
                },
                {
                    label: this.$t('in.lottable12'),
                    prop: "lottable12",
                    input: "date"
                }
            ],
            tableData: [],
            pageSize: 10,
          page: 1,
            total: 0,
            tableSelectData: [],
            tableSearhData: {},
        };
    },
    computed: {
        btnConfig() {
            return [
                {label: this.$t('common.export'), certigier: !this.btnPermNameList.includes('WM06020101'), invalid: "download"},
            ]
        }
    },
    created() {
    },
    methods: {
        //选中的内容
        selectData(data) {
            this.tableSelectData = data;
        },
        async download(data) {
            if (Object.keys(this.tableSearhData).length == 0) {
                this.$message.error(this.$t('msg.msg29'));
                return;
            }
            try {
                let res = await this.$api.post(`/balance/exportbalance`, this.tableSearhData, {responseType: 'blob'});
                if (window.navigator.msSaveBlob) {
                    var blobObject = new Blob([res.data]);
                    window.navigator.msSaveBlob(blobObject, this.$t('ex.vib') + '.xls');
                } else {
                    var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
                    var filename = this.$t('ex.vib') + '.xls';
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                }
            } catch (e) {
                this.$message.error(e);
            } finally {
                
            }
        },
        async getTableData(page, data) {
          this.$set(data, "pageNum", page);
          this.$set(data, "pageSize", this.pageSize);
            try {
                this.loading = true;
                let res = await this.$api.post(`/queryVibdetailList`, data);
                
                    this.tableData = res.page.list;
                  this.page = res.page.curPage;
                    this.pageSize = res.page.pageSize;
                    this.total = res.page.total;
                
            } catch (e) {
                this.$message.error(e);
            } finally {
                this.loading = false;
            }
        },
        //搜索的值
        searhData(data, up) {
            if (!up) {
                this.tableSearhData = data;
            } else {
                this.tableSearhData = data;
                this.getTableData(1, this.tableSearhData);
            }
        },
    },
    mounted() {
        this.$store.commit("setSkip", {});
        this.$store.commit("setNewFlag", false);
        this.$store.commit("setRouteData", {});
        this.getTableData(1, {});
    },
    watch: {},
    components: {
        "v-tableTitle": tableTitle,
        "v-table": table,
    }
};
</script>

<style scoped>
#vibdetail {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
